/**
 * 部门多选弹窗
 */
<template>
<vp-dialog ref="editDialogRef" :span="2">
    <template #title>
        <vp-label zh="选择部门" en="Choose Department" align="left"/>
    </template>
    <vp-card class="mb5">
        <el-form ref="searchFormRef" :model="searchForm" @submit.prevent
            @keyup.enter="handleSearch" label-width="120px">
            <vp-search-row :show-more="showMore">
                <vp-search-col :span="2">
                    <el-form-item prop="keyword">
                        <template #label><vp-label zh="部门" en="Department"/></template>
                        <el-input v-model="searchForm.keyword" v-trim></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="handleSearch"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                </vp-search-col>
            </vp-search-row>
        </el-form>
    </vp-card>
    <vp-card v-loading="loading">
        <vp-table :data="tableData" 
            @selection-change="handleSelectionChange" 
            @row-click="handleRowClick"
            @sort-change="handleSortChange"
            :height="`calc(100vh - 450px - ${showMore?'47px':'0px'}`"
            ref="multipleTable" stripe border  style="width: 100%" row-key="id">
            <el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
            <el-table-column align="center" label="#" type="index">
            </el-table-column>
            <el-table-column sortable="custom" prop="dprtname" min-width="180" show-overflow-tooltip>
                <template #header><vp-label zh="部门" en="Department"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.dprtname)" />
                </template>
            </el-table-column>
        </vp-table>
        <div style="float: right;padding-top: 8px;padding-bottom: 8px;">
            <el-popover placement="top-end" :width="400" trigger="click">
                <template #reference>
                    <el-badge :value="multipleSelection.length" type="info">
                        <vp-btn-selected></vp-btn-selected>
                    </el-badge>
                </template>
                <el-table :data="multipleSelection"  border stripe max-height="500" row-key="id">
                    <el-table-column prop="dprtname">
                        <template #header><vp-label zh="部门" en="Department"/></template>
                    </el-table-column>
                    <el-table-column width="90">
                        <template #header><vp-label-operations/></template>
                        <template #default="{row}">
                            <vp-btn-del text @click="handleSelectedDelete(row)"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-popover>
        </div>
    </vp-card>
    <template #footer>
        <vp-btn-confirm  @click="handleSave"/>
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import {markTextColor} from '/@/utils/toolsValidate';
export default defineComponent({
    name: "vpDepartmentMultDialog",
    components: {},
    emits:["confirm"],
    props: {
        selected: {
            type: Array,
            default: [],
        },
    },
    setup(props, context) {
        const state = reactive({
            searchForm: {
				keyword: "",
			},
            page: {
				total: 0, // 总条数
				pageNum: 1, // 当前页
				pageSize: 999, // 分页大小
				sortColumn: "",
				sortOrder: ""
			},
			tableData: [],
            multipleSelection: [],
            showMore: false,
            loading: false
		});
        const multipleTable = ref();
        const editDialogRef = ref();
        const searchFormRef = ref();

        const handleOpen = ()=>{
            editDialogRef.value.handleOpen();
            state.multipleSelection = [];
            loadDataList();
        }

        watch(()=>state.page.pageNum, ()=>{
			loadDataList();
		})

        const loadDataList = () => {
			state.loading = true;
			request.get('/system/department/openList', {
				params: {
					...state.searchForm,
					...state.page,
				}
			}).then(res => {
                state.tableData = res?.data?.list || [];
				state.page.total = res?.data?.total || 0;
				state.page.pageNum = res?.data?.pageNum || 1;
 			}).finally(()=>{
				state.loading = false
			})
		}

        const handleSelectionChange = (val: any) => { 
            state.multipleSelection = val;
        }

        const handleRowClick = (row: any) => {
            multipleTable.value.toggleRowSelection(row);
        }

        const handleSave = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", state.multipleSelection);
            editDialogRef.value.handleClose();
        }

        const handleClose = (tag: any) => {
            multipleTable.value.toggleRowSelection(tag, false);
        }

        const handleSearch = ()=>{
            if(state.page.pageNum == 1){
				loadDataList();
			}else{
				state.page.pageNum = 1
			}
		}

        const handleSearchReset = () => {
            searchFormRef.value.resetFields();
        }

        const handleSortChange = (column: any) => {
            state.page.sortColumn = column.prop;
            state.page.sortOrder = column.order == 'descending' ? 'desc' : 'asc'
            loadDataList();
        }

        const handleSelectedDelete = (row: any) => {
            multipleTable.value.toggleRowSelection(row, false);
        }

        return {
            ...toRefs(state),
            searchFormRef,
            handleSave,
            editDialogRef,
            handleOpen,
            handleSelectionChange,
            handleClose,
            multipleTable,
            handleRowClick,
            handleSearch,
            handleSearchReset,
            handleSortChange,
            markTextColor,
            handleSelectedDelete,
        }
    },
})
</script>
